<div class="right-bx-contain large-12 column">
	<div class="right-head large-12 column">
		<p>People to Connect</p>
</div>
<?php foreach ($possible_connections as $value) { ?>
<div id="possible_<?=$value->id?>"class="right-content large-12 column">
	<div class="user-dp medium-2 large 2 column" style="background:url('<?= IMAGE_URL_SMALL.$value->profile_pic ?>');background-size:cover;"></div>
<div class="userinfo medium-6 large-7 column">
	<a target ="_blank" href="<?=BASE_URI.'profile?bhd='.$value->id?>"><?= $value->fname.' '.$value->lname?></a>
	<p><small>Freelance Web Programmer</small></p>
</div>
<div class="text-right btn-lst medium-3 large-3 columns">
	<a friend-id="<?= $value->id ?>" class="tiny radius button btnConnect">Connect</a>
</div>
</div>
	<?php } ?>
	<div class="see-more text-right large-12 column">
		<a href="">See more people</a>
	</div>
</div>


<script type="text/javascript">
	var pusher = new Pusher(PUSHER_APP_KEY);
	var channel = pusher.subscribe('my-channel');
	
	channel.bind('request-sent', function(data) {
		if(data.sender_id == SS_USER_ID)
		{
			$('#possible_' + data.receiver_id).fadeOut(2000,function(){
				$(this).remove();
			});
		}
	});


	function insertRequest(friend_id)
	{
		var params = {};
		params.receiver_id = friend_id;
		return $.ajax({
			url: URL + 'connections/requestConnection',
			type: 'post',
			data: params,
			dataType: 'json'
		});
	}

	var $connect = $('.btnConnect');
	
	$connect.one('click',function(){
		
		var me = $(this);
		if(me.text() == "Connection Request Sent") return false;
		var friend_id = $(this).attr('friend-id');
		$(this).text('Sending . . .');
		if(friend_id){
			insertRequest(friend_id).done(function(result){
				if(result.status == true)
				{

					me.text('Connection Request Sent');
				}
				else
				{
					me.text(result.messages);
				}
			});
		}
	});

</script>